<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebUpload文件上传</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/webuploader/0.1.1/webuploader.css"/>
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
<!--    <script type="text/javascript" src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script>-->
    <script type="text/javascript" src="https://cdn.staticfile.org/webuploader/0.1.1/webuploader.js"></script>
    <style type="text/css" rel="stylesheet">
        #upload-container, #uploader-list{
            width: 500px;
            margin: 0 auto;
        }
        #upload-container{
            cursor: pointer;
            border-radius: 15px;
            background-color: #EEEEEE;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #uploader-list{
            height: 800px;
            border: 1px solid #EEE;
            border-radius: 5px;
            margin-top: 10px;
        }
        #upload-container>span{
            widows: 100%;
            text-align: center;
            color: gray;
            display: block;
            padding: 10px;
        }
        .upload-item{
            margin-top: 5px;
            padding-bottom: 5px;
            border-bottom: 1px solid gray;
        }
        .percentage{
            height: 5px;
            background-color: green;
        }
        .btn-delete, .btn-retry{
            cursor: pointer;
            color: gray;
        }
        .btn-delete:hover{
            color: orange;
        }
        .btn-retry:hover{
            color: green;
        }
    </style>
</head>
<body>
    <div id="uploader" class="wu-example">
        <div id="upload-container">
            <span>点击或将文件拖拽至此上传</span>
        </div>
        <!--用来存放文件信息-->
        <div id="uploader-list" class="uploader-list">

        </div>
        <div id="picker">点此上传文件文件</div>
    </div>

    <script type="text/javascript">
        $("#upload-container").click(function () {
            $("#picker").find('input').click()
        })
        var uploader = WebUploader.create({
            // swf文件路径
            swf: 'https://cdn.staticfile.org/webuploader/0.1.1/Uploader.swf',
            // 文件接收服务端。
            server: 'http://127.0.0.1:8080/upload',
            // 拖拽的容器
            dnd: '#upload-container',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 自动上传
            auto: true,
            // 选择多个
            multiple: true,
            // 开启分片上传
            chunked: true,
            // 上传的并发数
            threads: 50,
            // 请求方式
            methods: 'POST',
            // 单个文件的代销限制，单位字节
            fileSingleSizeLimit: 5000 * 1024 * 1024,
            // 总文件大小
            fileSizeLimit: 50000 * 1024 * 1024,
            // 文件的key
            fileVal: 'file'
        });

        // 上传的文件入队列之前触发的事件
        uploader.on('beforeFileQueued', function (file) {
            console.log(file);
            console.log(uploader)
        })

        // 上传的文件入队列时触发的事件
        uploader.on('fileQueued', function (file) {
            console.log(file.ext);
            console.log(file.size);
            console.log(file.name);
            var html = `<div class="upload-item"><span>文件名:${file.name}</span><span data-file_id="${file.id}" class="btn-delete">删除</span><span data-file_id="${file.id}" class="btn-retry">重试</span><div class="percentage ${file.id}" style="width: 0%"></div></div>`
            $("#uploader-list").append(html)
        })

        // 文件上传进度
        uploader.on('uploadProgress', function (file, percentage) {
            console.log(percentage * 100 + '%')
            var width = $('.upload-item').width();
            $(`.${file.id}`).width(width*percentage)
        })

        // 文件上传成功
        uploader.on('uploadSuccess', function (file, response) {
            console.log(file.id + "传输成功")
        })

        // 文件上传失败
        uploader.on('uploadError', function (file) {
            console.log(file.id + "传输失败")
        })

        // 删除文件
        $('#uploader-list').on('click', '.upload-item .btn-delete', function () {
            // 删除某个文件
            file_id = $(this).data('file_id');
            // uploader.removeFile(file_id); 标记文件状态为已取消
            // 从队列中删除
            uploader.removeFile(file_id, true);
            console.log(uploader.getFiles())
        })

        // 重新上传文件
        $('#uploader-list').on('click', '.btn-retry', function () {
            uploader.retry($(this).data('file_id'));
        })

        // 文件上传完毕
        uploader.on('uploadComplete', function (file) {
            console.log(uploader.getFiles())
        })
    </script>
</body>
</html>